<template>
    <!-- 下面第一个图表 -->
    <div id="main7" style="height: 180px; width: 210px;"></div>
  </template>
  <script>
  import * as echarts from "echarts";
  export default {
    data() {
      return {
        zaiXianYiBiaoPan:0,
      };
    },
    created() {
      // this.getDataList();
    },
    mounted() {
    },
    methods: {
     
      // 柱状图
      initCharts() {
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById("main7"));
        // 实现相应式，跟随页面变化
        window.addEventListener("resize", () => {
          myChart.resize();
        });
        // 指定图表的配置项和数据
        var option = {
                  tooltip: {
                      formatter: "{a} <br/>{b} : {c}%"
                  },
                  // toolbox: {
                  //     show: true,
                  //     feature: {
                  //         mark: { show: true },
                  //         restore: { show: true },
                  //         saveAsImage: { show: true }
                  //     }
                  // },
                  series: [
                      {
                          name: '设备在线率',
                          radius: '95%',
                          type: 'gauge',
                          splitNumber: 10,       // 分割段数，默认为5
                          axisLine: {            // 坐标轴线
                              lineStyle: {       // 属性lineStyle控制线条样式
                                  color: [
                                      [1, new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                                          {
                                              offset: 0.1,
                                              color: "#0B95FF"
                                          },
                                          {
                                              offset: 0.6,
                                              color: "#30D27C"
                                          },
                                          {
                                              offset: 1,
                                              color: "#FFC600"
                                          }
                                      ])
                                      ]
                                  ],
                                  width: 8
                              }
                          },
                          axisTick: {            // 坐标轴小标记
                              splitNumber: 10,   // 每份split细分多少段
                              length: 12,        // 属性length控制线长
                              lineStyle: {       // 属性lineStyle控制线条样式
                                  color: 'auto'
                              }
                          },
                          axisLabel: {           // 坐标轴文本标签，详见axis.axisLabel
                              textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                                  color: '#228b22'
                              }
                          },
                          splitLine: {           // 分隔线
                              show: true,        // 默认显示，属性show控制显示与否
                              length: 10,         // 属性length控制线长
                              lineStyle: {       // 属性lineStyle（详见lineStyle）控制线条样式
                                  color: 'auto'
                              }
                          },
                          pointer: {    //指针大小
                              width: 3
                          },
                          title: {
                              show: true,
                              offsetCenter: [0, '79%'],       // x, y，单位px
                              textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                                  fontWeight: 'bolder',
                                  color: 'aliceblue',
                              }
                          },
                          detail: {
                              formatter: '{value}%',
                              fontSize: 20,
                              offsetCenter: [0, '25%'],
                              textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                                  color: '#48b',
                                  fontWeight: 'bolder'// 下面data数据的字体设置！！！！
  
                              }
                          },
                          data: [{ value: this.zaiXianYiBiaoPan.toFixed(0), name: '设备在线率' }]
                      }
                  ]
              };
        myChart.setOption(option);
      },
    },
  };
  </script>
    
  <style></style>